import { App, createApp } from 'vue'

// interectionObserver 主要监听元素是否在视口内
// MutationObserver 主要监听子级的变化  还有属性的变化  以及  增删改查
// ResizeObserver 主要监听元素宽高的变化
// 自定义hock
function useResize(el:HTMLElement, callback:Function) {
  let resizeObserver = new ResizeObserver((entries) => {
    console.log(entries)
    callback(entries)
  })

  resizeObserver.observe(el)
}

// let app = createApp()
// app.use("xxx").use("xxx")

// 自定义指令
const install = (app:App) => {
  app.directive('resize', {
    mounted(el, bingding) {
      useResize(el, bingding.value)
    }
  })
}

useResize.install = install

export default useResize